<template>
  <div class="good-list-box">
    <div class="nav-box">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <span class="breadcrumb-link" @click="toHome">首页</span>
        </a-breadcrumb-item>
        <span slot="separator">
            <a-icon style="color: #acacac;font-size: 12px" type="right" />
          </span>
        <a-breadcrumb-item>购物车</a-breadcrumb-item>
        <a-breadcrumb-item>确认订单</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="container-box">
      <div class="address">
        <div class="address-top">
          <span>收货方式</span>
          <span :class="{active: isActive}" @click="handleReceivingMethodClick1">快递
            <span class="check-icon" v-show="isActive">
              <a-icon class="a-icon" type="check" />
            </span>
          </span>
          <span :class="{active: !isActive}" @click="handleReceivingMethodClick2">自提
            <span class="check-icon" v-show="!isActive">
              <a-icon class="a-icon" type="check" />
            </span></span>
          <span class="address-right" @click="hadleAddAddressClick">新增收货地址 +</span>
        </div>
        <div class="address-center">
          <div class="address-item">
            <div class="address-item-top">
              <span>{{address.name}}</span>
              <span>{{address.tel}}</span>
            </div>
            <div class="address-item-center">
              <p v-show="PickupMethod">{{address.sheng}} {{address.city}} {{address.quyu}}</p>
              <p>{{address.address}}</p>
            </div>
            <div class="address-item-bottom" v-show="PickupMethod">
              <div @click="handleSetDefaultClick">设为默认</div>
              <div>
                <span @click="handleUpdateClick">修改</span>
                <span @click="handleUpdateClick">删除</span>
              </div>
            </div>
            <div class="address-item-bottom" style="margin-top: 50px" v-show="!PickupMethod">营业时间：06:00-18:00</div>
            <span class="check-icon">
              <a-icon class="a-icon" type="check" />
            </span>
          </div>
          <div class="address-item-btn" @click="hadleAddAddressClick">
            <div>
              <p>
                <a-icon type="plus" />
              </p>
              <p>添加收货地址</p>
            </div>
          </div>
        </div>
      </div>
      <div class="payment">
        <div class="payStyle-top">
          支付方式
        </div>
        <div class="payStyle-bottom">
          <div class="payStyle-bottom-item" :class="{payStyleActive: isPayActive1}" @click="handlePayClick1">
            <div class="payStyle-bottom-item-center">
              <div class="pay-img">
                <img src="@/assets/images/qianbao.png" alt="">
              </div>
              <div class="pay-title">
                <p>余额支付</p>
                <p>( ￥ {{usermoney}})</p>
              </div>
            </div>
            <span class="check-icon" v-show="isPayActive1">
              <a-icon class="a-icon" type="check" />
            </span>
          </div>
          <div class="payStyle-bottom-item" :class="{payStyleActive: isPayActive2}" @click="handlePayClick2">
            <img src="@/assets/images/wx_pay.png" alt="">
            <span class="check-icon" v-show="isPayActive2">
              <a-icon class="a-icon" type="check" />
            </span>
          </div>
          <div class="payStyle-bottom-item" :class="{payStyleActive: isPayActive3}" @click="handlePayClick3">
            <img src="@/assets/images/ali_pay.png" alt="">
            <span class="check-icon" v-show="isPayActive3">
              <a-icon class="a-icon" type="check" />
            </span>
          </div>
        </div>
      </div>
      <div class="proInfo-top">
        <span>确认商品信息</span>
        <span @click="backToCarts">返回购物车修改 <a-icon style="font-size: 12px" type="right" /></span>
      </div>
      <ul class="proInfor_title">
        <li>商品信息</li>
        <li>单价</li>
        <li>数量</li>
        <li>金额</li>
      </ul>
      <ul class="inforTable" v-for="(item, index) in products" :key="index">
        <li>{{item.shop_name}}</li>
        <li v-for="items in item.list" :key="items.cid">
          <div>
            <img :src="items.img" alt="">
            <div class="inforContent">
              <p>{{items.product_title}}</p>
              <p>{{items.size}}</p>
            </div>
          </div>
          <div style="color: #020202;">￥{{items.price}}</div>
          <div style="color: #020202;">{{items.num}}</div>
          <div style="color: #020202;">￥{{(items.price * items.num).toFixed(2)}}</div>
        </li>
        <li>
          <div>
            <span>店铺优惠：</span>
            <span>暂无可用优惠券</span>
            <span>运费 : ￥ 10</span>
          </div>
          <div>
            共
            <span>1</span>
            件商品, 合计 :
            <span>￥{{totalMoney2}}</span>
          </div>
        </li>
      </ul>
      <ul class="infor-footer">
        <li>
          <div>
            <p>
              <span>平台优惠券</span>
              <span>2张</span>
            </p>
          </div>
          <div>
            <a-dropdown>
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item v-for="item in couponList" :key="item.coupon_id">{{item.coupon_name}}</a-menu-item>
              </a-menu>
              <a-button style="margin-left: 8px"> {{coupon}} <a-icon type="down" /> </a-button>
            </a-dropdown>
          </div>
        </li>
        <li>
          <div>
            <p>
              <span>商品总价：</span>
              <span>￥{{totalMoney2}}</span>
            </p>
            <p>
              <span>店铺优惠：</span>
              <span>-￥0.00</span>
            </p>
            <p>
              <span>平台优惠：</span>
              <span>-￥{{platformCoupon}}</span>
            </p>
            <p>
              <span>会员折扣优惠：</span>
              <span>-￥0.00</span>
            </p>
            <p>
              <span>应付金额：</span>
              <span class="money">￥{{totalMoney}}</span>
            </p>
          </div>
        </li>
        <li>
          <div class="payStyle-bottom-top">
            <div @click="$message.success('敬请期待！')">提交订单</div>
            <div>
              <span>应付金额：</span>
              <span>￥ {{totalMoney}}</span>
            </div>
          </div>
          <p>寄送至：{{address.sheng}} {{address.city}} {{address.quyu}} {{address.address}}</p>
          <p>{{address.name}}：{{address.tel}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import api from '@/api/order/api'
export default {
  name: 'index',
  props: ['navListId'],
  data () {
    return {
      PickupMethod: true,
      isActive: true,
      isPayActive1: true,
      isPayActive2: false,
      isPayActive3: false,
      coupon: '请选择平台优惠券',
      address: {},
      addressList: {},
      couponList: [],
      products: [],
      shopList: [],
      platformCoupon: '0.00',
      totalMoney: '',
      totalMoney2: '',
      num: '',
      usermoney: '0.00'
    }
  },
  mounted () {
    this.getOrderProducts()
  },
  methods: {
    getOrderProducts () {
      const params = {
        module: 'app_pc',
        action: 'order',
        m: 'Settlement',
        access_id: localStorage.getItem('token'),
        product_type: null,
        address_id: null,
        canshu: true,
        coupon_id: '0,0',
        product: this.$store.state.orderProducts,
        language: null
      }
      api.getOrderProducts(params).then(res => {
        if (res.data.code === 200) {
          const data = res.data.data
          this.usermoney = data.user_money
          this.addressList = data.address
          this.address = this.addressList
          this.couponList = data.coupon_list
          this.products = data.products
          this.shopList = data.shop_list
          this.num = data.products[0].products_num
          this.totalMoney2 = data.products[0].list[0].price * data.products[0].products_num + 10
          this.totalMoney = this.totalMoney2
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.error(err)
      })
    },
    handleReceivingMethodClick1 () {
      this.isActive = !this.isActive
      this.PickupMethod = true
      this.address = this.addressList
    },
    handleReceivingMethodClick2 () {
      this.isActive = !this.isActive
      this.PickupMethod = false
      this.address = this.shopList
    },
    hadleAddAddressClick () {
      this.$message.success('敬请期待！')
    },
    handleUpdateClick () {
      this.$message.success('敬请期待！')
    },
    handleSetDefaultClick () {
      this.$message.success('敬请期待！')
    },
    backToCarts () {
      this.$message.success('敬请期待！')
    },
    handlePayClick1 () {
      this.isPayActive1 = true
      this.isPayActive2 = false
      this.isPayActive3 = false
    },
    handlePayClick2 () {
      this.isPayActive1 = false
      this.isPayActive2 = true
      this.isPayActive3 = false
    },
    handlePayClick3 () {
      this.isPayActive1 = false
      this.isPayActive2 = false
      this.isPayActive3 = true
    },
    handleMenuClick(e) {
      this.couponList.forEach(item => {
        if (e.key === item.coupon_id) {
          this.coupon = item.coupon_name
          if (e.key !== '0') {
            if (item.money) {
              this.platformCoupon = item.money.toFixed(2)
              this.totalMoney = this.totalMoney2 - this.platformCoupon
            } else {
              const str = item.coupon_name.split('￥')[1]
              this.platformCoupon = parseInt(str.substr(0)).toFixed(2)
              this.totalMoney = this.totalMoney2 - this.platformCoupon
            }
          } else {
            this.platformCoupon = '0.00'
            this.totalMoney = this.totalMoney2
          }
        }
      })
    },
    toHome () {
      this.$store.commit('changePage', 'HomeList')
    }
  }
}
</script>

<style scoped lang="scss">
  ::v-deep .ant-btn {
    color: #9c9c9c;
    &:hover {
      border: 1px solid #b9b9b9 !important;
    }
  }
.good-list-box {
  width: 1280px;
  margin: 0 auto;
  padding-left: 8px;
  /*background-color: #ff90a2;*/
  .nav-box {
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    /*background-color: #62ffe1;*/
    .breadcrumb-link {
      color: #303133!important;
      cursor: pointer;
      &:hover {
        color: #d4282d!important;
      }
    }
  }
  .container-box {
    width: 100%;
    min-height: 500px;
    /*background-color: #ffdc59;*/
    .address {
      width: 100%;
      height: 344px;
      padding: 20px 0 50px 0;
      /*background-color: #2658ff;*/
      .address-top {
        position: relative;
        width: 100%;
        height: 46px;
        /*background-color: #62ff9f;*/
        border-bottom: 1px solid #E6E6E6;
        span{
          display: inline-block;
          position: absolute;
          top: 0;
          height: 30px;
          text-align: center;
          line-height: 30px;
          font-weight: bold;
          &:nth-child(1) {
            font-size: 16px;
            color: #020202;
          }
          &:nth-child(2) {
            margin-left: 75px!important;
            width: 100px;
            height: 30px;
            border: 1px solid #DDDDDD;
            font-size: 14px;
            color: #020202;
            cursor: pointer;
          }
          &:nth-child(3) {
            width: 100px;
            height: 30px;
            margin-left: 181px;
            border: 1px solid #DDDDDD;
            font-size: 14px;
            color: #020202;
            cursor: pointer;
          }
          &:nth-child(4) {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #d4282d;
            font-weight: normal;
            cursor: pointer;
            right: 0;
          }
        }
        .active {
          width: 100px;
          height: 30px;
          border: 1px solid #d4282d!important;
          font-size: 14px;
          color: #d4282d!important;
          cursor: pointer;
          overflow: hidden;
          .check-icon {
            display: inline-block;
            right: 0;
            margin-top: 4px;
            width: 0;
            height: 0;
            border-width: 12px;
            border-style: solid;
            border-color: transparent #d4282d #d4282d transparent;
            .a-icon {
              position: absolute;
              top: -2px;
              color: #fff!important;
              font-size: 12px;
            }
          }
        }
      }
      .address-center {
        width: 100%;
        min-height: 208px;
        padding: 24px 0 24px 0;
        /*background-color: #ffc732;*/
        .address-item {
          position: relative;
          float: left;
          margin-right: 25px;
          width: 280px;
          height: 160px;
          padding: 0 10px 0 10px;
          border-top: 2px solid #d4282d;
          border-left: 1px solid #d4282d;
          border-right: 1px solid #d4282d;
          border-bottom: 1px solid #d4282d;
          .address-item-top {
            width: 100%;
            height: 43px;
            line-height: 43px;
            /*background-color: #f6ffd8;*/
            border-bottom: 1px solid #DDDDDD;
            span {
              color: #020202;
              font-size: 14px;
              font-weight: bold;
              &:first-child {
                float: left;
              }
              &:last-child {
                float: right;
              }
            }
          }
          .address-item-center {
            padding-top: 15px;
            p {
              &:first-child {
                color: #020202;
              }
            }
          }
          .address-item-bottom {
            width: 100%;
            height: 24px;
            line-height: 24px;
            margin-top: 25px;
            div {
              &:first-child {
                color: #fff;
                padding: 0 5px 0 5px;
                background-color: #d4282d;
                cursor: pointer;
                float: left;
              }
              &:last-child {
                float: right;
                span {
                  cursor: pointer;
                  &:hover {
                    color: #d4282d;
                  }
                  &:first-child {
                    margin-right: 10px;
                  }
                }
              }
            }
          }
          .check-icon {
            position: absolute;
            bottom: 0;
            right: 0;
            display: inline-block;
            right: 0;
            width: 0;
            height: 0;
            border-width: 12px;
            border-style: solid;
            border-color: transparent #d4282d #d4282d transparent;
            .a-icon {
              position: absolute;
              top: -2px;
              color: #fff!important;
              font-size: 12px;
            }
          }
        }
        .address-item-btn {
          float: left;
          margin-right: 25px;
          width: 280px;
          height: 160px;
          padding: 0 10px 0 10px;
          border-top: 2px solid rgba(230, 230, 230, 1);
          border-left: 1px solid rgba(230, 230, 230, 1);
          border-right: 1px solid rgba(230, 230, 230, 1);
          border-bottom: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          &:hover {
            div {
              p {
                color: #d4282d;
              }
            }
          }
          div {
            p {
              color: #888888;
              text-align: center;
              &:first-child {
                font-size: 34px;
              }
            }
          }
        }
      }
    }
    .payment {
      width: 100%;
      height: 156px;
      /*background-color: #ff9066;*/
      .payStyle-top {
        width: 100%;
        height: 32px;
        font-size: 16px;
        line-height: 16px;
        color: #020202;
        font-weight: bold;
        padding-bottom: 15px;
        border-bottom: 1px solid #E6E6E6;
      }
      .payStyle-bottom {
        width: 100%;
        height: 124px;
        padding: 24px 0 50px 0;
        .payStyle-bottom-item {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          width: 210px;
          height: 50px;
          border: 1px solid rgba(230, 230, 230, 1);
          margin-right: 30px;
          float: left;
          cursor: pointer;
          .payStyle-bottom-item-center {
            display: flex;
            align-items: center;
            .pay-img {
              float: left;
              margin-right: 10px;
            }
            .pay-title {
              float: right;
            }
          }
          .check-icon {
            position: absolute;
            display: inline-block;
            right: 0;
            bottom: 0;
            width: 0;
            height: 0;
            border-width: 12px;
            border-style: solid;
            border-color: transparent #d4282d #d4282d transparent;
            .a-icon {
              position: absolute;
              top: -2px;
              color: #fff!important;
              font-size: 12px;
            }
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .payStyleActive {
          position: relative;
          width: 210px;
          height: 50px;
          border: 1px solid #d4282d!important;
          margin-right: 30px;
          float: left;
        }
      }
    }
    .proInfo-top {
      width: 100%;
      height: 32px;
      font-size: 16px;
      line-height: 16px;
      color: #020202;
      font-weight: bold;
      padding-bottom: 15px;
      border-bottom: 1px solid #E6E6E6;
      display: flex;
      justify-content: space-between;
      span {
        &:last-child {
          font-size: 14px;
          color: #d4282d;
          font-weight: normal;
        }
        &:last-child {
          cursor: pointer;
        }
      }
    }
    .proInfor_title {
      width: 100%;
      height: 47px;
      display: flex;
      li {
        flex: 1;
        height: 100%;
        line-height: 47px;
        text-align: center;
        &:first-child {
          flex: 1.65;
        }
        &:nth-child(2) {
          padding-left: 23px;
        }
      }
    }
    .inforTable {
      width: 100%;
      border: 1px solid #E6E6E6;
      li {
        width: 100%;
        &:first-child {
          height: 46px;
          padding-left: 20px;
          line-height: 46px;
          background-color: rgba(220, 220, 220, 0.49);
        }
        &:nth-child(2) {
          height: 118px;
          display: flex;
          border-bottom: 1px solid #E6E6E6;
          div {
            flex: 1;
            line-height: 118px;
            text-align: center;
            &:first-child {
              flex: 1.65;
              padding-left: 20px;
              text-align: left;
              display: flex;
              align-items: center;
              align-items: center;
              img {
                width: 80px;
                height: 80px;
                display: inline-block;
                float: left;
              }
              .inforContent {
                width: calc(444px - 80px);
                float: left;
                height: 80px;
                text-align: left;
                padding-left: 10px;
                line-height: 20px;
                display: flex;
                flex-direction: column;
                p {
                  flex: 1;
                  display: flex;
                  align-items: center;
                }
              }
            }
          }
        }
        &:nth-child(3) {
          height: 54px;
          line-height: 54px;
          padding-left: 20px;
          padding-right: 20px;
          display: flex;
          justify-content: space-between;
          div {
            &:first-child {
              span {
                &:nth-child(3) {
                  margin-left: 45px;
                }
              }
            }
            &:last-child {
              span {
                color: #d4282d;
              }
            }
          }
        }
      }
    }
    .infor-footer {
      width: 100%;
      li {
        &:first-child {
          height: 105px;
          display: flex;
          padding-top: 11px;
          padding-bottom: 11px;
          flex-direction: column;
          div {
            flex: 1;
            padding-left: 20px;
            display: flex;
            align-items: center;
            &:last-child {
              padding-left: 11px;
            }
            span {
              &:first-child {
                font-size: 14px;
                line-height: 14px;
                color: #020202;
                font-weight: bold;
                margin-bottom: 15px
              }
              &:last-child {
                font-size: 12px;
                color: #999999;
                margin-left: 5px;
                font-weight: 300;
              }
            }
          }
        }
        &:nth-child(2){
          height: 170px;
          padding: 20px;
          background-color: rgba(233, 233, 233, 0.85);
          div {
            min-width: 180px;
            height: 100%;;
            float: right;
            display: flex;
            flex-direction: column;
            p {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: #020202;
              .money {
                color: #d4282d;
                font-weight: bold;
              }
            }
          }
        }
        &:nth-child(3){
          height: 156px;
          padding: 24px 0 24px 0;
          .payStyle-bottom-top {
            width: 100%;
            height: 50px;
            line-height: 50px;
            margin-bottom: 18px;
            div {
              float: right;
              &:first-child {
                width: 168px;
                height: 100%;
                line-height: 50px;
                text-align: center;
                color: white;
                background-color: #D4282D;
                cursor: pointer;
                margin-left: 35px;
                transition: all 0.4s ease;
                &:hover {
                  background-color: rgba(246, 58, 44, 0.89);
                }
              }
              &:last-child {
                display: flex;
                align-items: center;
              }
              span {
                &:last-child {
                  font-weight: bold;
                  color: #d4282d;
                  font-size: 20px;
                }
              }
            }
          }
          p {
            color: #999999;
            text-align: right;
          }
        }
      }
    }
  }
}
</style>
